<template>
  <el-dialog title="查看" :close-on-click-modal="false" :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll append-to-body width="1200px">
   <div class="JNPF-preview-main">
        <div class="JNPF-common-page-header">
            <!-- <el-page-header @back="goBack" :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"/> -->
            <div class="options">
                <!-- <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail">确 定</el-button> -->
                <el-button @click="goBack">取 消</el-button>
            </div>
        </div>
        <el-row :gutter="15"  class="main" :style="{margin: '0 auto',width:'100%'}">
            <el-form ref="elForm" :model="dataForm" size="medium" label-width="140px" label-position="left" :disabled="!!isDetail" :rules="rules">
            <div class="JNPF-common-title mb-20">
                <h2 class="bold">基础信息</h2>
            </div>
            <el-row>
                <el-col :span="12">
                <el-form-item label="企业编码" prop="qybm" required >
                    <el-input v-model="dataForm.qybm" placeholder="请输入" disabled clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="重大危险源编码" prop="zdwxybm" required >
                    <el-input v-model="dataForm.zdwxybm" placeholder="请输入" disabled clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="重大危险源名称" prop="zdwxymc" required >
                    <el-input v-model="dataForm.zdwxymc" placeholder="请输入" disabled clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="地理位置" prop="dz" required >
                    <el-select v-model="dataForm.dz" placeholder="请选择" disabled clearable :style='{"width":"100%"}' filterable >
                    <el-option v-for="(item, index) in dzOptions" :key="index" :label="item.MC" :value="item.ID" ></el-option>
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="管辖部门" prop="gxbm" required >
                    <el-select v-model="dataForm.gxbm" placeholder="请选择" disabled clearable :style='{"width":"100%"}' >
                    <el-option v-for="(item, index) in gxbmOptions" :key="index" :label="item.F_FullName" :value="item.F_Id" ></el-option>
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="管控负责人" prop="gkfzr" required >
                    <el-select v-model="dataForm.gkfzr" placeholder="请选择" disabled clearable :style='{"width":"100%"}' >
                    <el-option v-for="(item, index) in gkfzrOptions" :key="index" :label="item.F_RealName" :value="item.F_Id" ></el-option>
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="危险源单元类型" prop="dylx" required >
                    <el-select v-model="dataForm.dylx" placeholder="请选择" disabled clearable :style='{"width":"100%"}' >
                    <el-option v-for="(item, index) in dylxOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="投用日期" prop="tyrq" required >
                    <el-date-picker v-model="dataForm.tyrq" placeholder="请选择" disabled clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd" value-format="timestamp" >
                    </el-date-picker>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="经度" prop="jd" required >
                    <el-input v-model="dataForm.jd" placeholder="请输入" clearable disabled :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="纬度" prop="wd" required >
                    <el-input v-model="dataForm.wd" placeholder="请输入" disabled clearable :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="24">
                <el-form-item label="可能导致的事故" prop="knsg" required>
                    <el-checkbox-group v-model="dataForm.knsg" :style='{}' :max="5" :min="1">
                    <el-checkbox v-for="(item, index) in knsgOptions" :key="index" :label="item.id" disabled>{{item.fullName}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                </el-col>
                <el-col :span="24">
                </el-col>
            </el-row>
            <!--  -->
            <el-row>
                <el-col style="height:40px;">
                <el-button type="primary" disabled>
                    选择危险物质
                </el-button>
                </el-col>
                <template>
                <el-col>
                    <el-table :data="rightsDate" border stripe :height="heightTable">
                        <el-table-column v-for="info in rightHeader" :key="info.key" :property="info.key" :label="info.label">
                        <template slot-scope="scope">
                            {{scope.row[scope.column.property]}}  
                        </template>
                        </el-table-column>
                        <el-table-column label="存量(吨)" required>
                        <template slot-scope="scope">                                                                                         
                            <!-- <el-input-number v-model="scope.row.clZhi" placeholder="数字" :step="1" controls-position="" :min="0" @blur="handch(scope.row.id,scope.row.clZhi,scope.row.ljl,scope.row.jzxs)"></el-input-number> -->
                            <el-input-number v-model="scope.row.clZhi" placeholder="数字" disabled :step="1" controls-position="" :min="0" @change="handch(scope.row.id,scope.row.clZhi,scope.row.ljl,scope.row.jzxs)"></el-input-number>
                        </template>
                        </el-table-column>
                        <el-table-column v-for="info in rightHeader1" :key="info.key" :property="info.key" :label="info.label">
                        <template slot-scope="scope">
                            {{scope.row[scope.column.property]}}  
                            </template>
                        </el-table-column>
                        <el-table-column label="比值(qi/Qi)">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.biZhi" placeholder="请输入" clearable disabled :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                            <template slot="prepend"></template>
                            <template slot="append"></template>
                            </el-input>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                </template>
            </el-row>
            <!--  -->
            <div class="JNPF-common-title mb-20">
                <h2 class="bold">辨识记录</h2>
            </div>
            <el-row :gutter="20" class="custom-row">
                <el-col :span="12">
                <el-form-item label="比值之和" prop="bzzh" required >
                    <el-input v-model="dataForm.bzzh" placeholder="请输入" clearable disabled :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                <el-form-item label="辨识结果" prop="bsjg" required >
                    <el-input v-model="dataForm.bsjg" placeholder="请输入" clearable disabled :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                    <template slot="prepend"></template>
                    <template slot="append"></template>
                    </el-input>
                </el-form-item>
                </el-col>
            </el-row>
            <template v-if='fjRecord'>
                <div class="JNPF-common-title mb-20">
                <h2 class="bold">分级记录</h2>
                </div>
                <el-row :gutter="20" class="custom-row">
                <el-col :span="12">
                    <el-form-item label="厂外暴露人员数量" prop="cwsl" required>
                    <el-input-number v-model="dataForm.cwsl" placeholder="人数" disabled :step="1" controls-position="" :min="0" @change="handchRS(dataForm.cwsl)">
                    </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="暴露人员校正系数" prop="blxs" required>
                    <el-input v-model="dataForm.blxs" placeholder="请输入" clearable disabled :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                        <template slot="prepend"></template>
                        <template slot="append"></template>
                    </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="R值" prop="rz" required >
                    <el-input v-model="dataForm.rz" placeholder="请输入" clearable disabled :style='{"width":"100%"}' prefix-icon="" suffix-icon="" >
                        <template slot="prepend"></template>
                        <template slot="append"></template>
                    </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="危险源等级" prop="wxydj" required >
                    <el-select v-model="dataForm.wxydj" placeholder="" clearable disabled :style='{"width":"100%"}' >
                        <el-option v-for="(item, index) in wxydjOptions" :key="index" :label="item.fullName" :value="item.id" ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                </el-row>
            </template>
            
            <div class="JNPF-common-title mb-20">
                <h2 class="bold">管控措施</h2>
            </div>
            <el-row>
                <el-col :span="24">
                <el-form-item label="管控措施" prop="gkcs" required >
                    <el-input v-model="dataForm.gkcs" placeholder="请输入" disabled show-word-limit :style='{"width":"100%"}' type="textarea" :autosize='{"minRows":4,"maxRows":1000}' >
                    </el-input>
                </el-form-item>
                </el-col>
            </el-row>
            </el-form>
		</el-row>
	</div>
    <!-- <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="init" /> -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{
        $t("common.cancelButton")
      }}</el-button>
      <el-button type="primary" @click="select()">{{
        $t("common.confirmButton")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import request from '@/utils/request'
// import { GoodsList } from "@/api/extend/order";
import request from '@/utils/request'
import {getDictionaryDataSelector}from '@/api/systemData/dictionary'
import {previewDataInterface}from '@/api/systemData/dataInterface'
export default {
    data() {
        return {
        //   fjRecord:false, //-
          fjRecord:true, //-
          goodsBoxVisible: false,  //-
          heightTable:'90px',
          visible: false,
          isDetail: false,
          dataForm: {
            zdwxybm:undefined,
            zdwxymc:undefined,
            dz:"",
            gxbm:"",
            gkfzr:"",
            knsg:[],
            jd:undefined,
            wd:undefined,
            dylx:"",
            bzzh:undefined,
            bsjg:undefined,
            cwsl:undefined,
            blxs:undefined,
            rz:undefined,
            wxydj:"",
            tyrq:undefined,
            // wxwz:undefined,
            gkcs:undefined,
            qybm:undefined,
            sortCode:0,  //-

          },
          rules: {
            qybm:[
						{
							required:true,
							message:'请输入企业编码',
							trigger:'blur'
						},
						],
              zdwxybm:[
              {
                required:true,
                message:'请输入重大危险源编码',
                trigger:'blur'
              },
              ],
              zdwxymc:[
              {
                required:true,
                message:'请输入重大危险源名称',
                trigger:'blur'
              },
              ],
              dz:[
              {
                required:true,
                message:'请输入地理位置',
                trigger:'blur'
              },
              ],
              gxbm:[
              {
                required:true,
                message:'请输入管辖部门',
                trigger:'blur'
              },
              ],
              gkfzr:[
              {
                required:true,
                message:'请输入管控负责人',
                trigger:'blur'
              },
              ],
              knsg:[
              {
                required:true,
                message:'请输入可能导致的事故',
                trigger:'blur'
              },
              ],
              jd:[
              {
                required:true,
                message:'请输入经度',
                trigger:'blur'
              },
              ],
              wd:[
              {
                required:true,
                message:'请输入纬度',
                trigger:'blur'
              },
              ],
              dylx:[
              {
                required:true,
                message:'请输入危险源单元类型',
                trigger:'blur'
              },
              ],
              bzzh:[
              {
                required:true,
                message:'请输入比值之和',
                trigger:'blur'
              },
              ],
              bsjg:[
              {
                required:true,
                message:'请输入辨识结果',
                trigger:'blur'
              },
              ],
              cwsl:[
              {
                required:true,
                message:'请输入厂外暴露人员数量',
                trigger:'blur'
              },
              ],
              blxs:[
              {
                required:true,
                message:'请输入暴露人员校正系数',
                trigger:'blur'
              },
              ],
              rz:[
              {
                required:true,
                message:'请输入R值',
                trigger:'blur'
              },
              ],
              wxydj:[
              {
                required:true,
                message:'请输入危险源等级',
                trigger:'blur'
              },
              ],
              tyrq:[
              {
                required:true,
                message:'请输入投用日期',
                trigger:'blur'
              },
              ],
              wxwz:[
              {
                required:true,
                message:'请输入拥有的危险物质',
                trigger:'blur'
              },
              ],
              gkcs:[
              {
                required:true,
                message:'请输入管控措施',
                trigger:'blur'
              },
              ],

          },
          dzOptions:[],
          gxbmOptions:[],
          gkfzrOptions:[],
          knsgOptions:[{"fullName":"爆炸","id":"爆炸"},{"fullName":"火灾","id":"火灾"},{"fullName":"灼烫","id":"灼烫"},{"fullName":"中毒和窒息","id":"中毒和窒息"},{"fullName":"其他","id":"其他"}],
          dylxOptions:[{"fullName":"储存单元","id":"储存单元"},{"fullName":"生产单元","id":"生产单元"}],
          wxydjOptions:[{"fullName":"一级","id":"01"},{"fullName":"二级","id":"02"},{"fullName":"三级","id":"03"},{"fullName":"四级","id":"04"},{"fullName":"不构成危化品重大危险源","id":"05"}],
          
          //-
          rightHeader: [{label: '序号',key: 'code'},{label: '危险物质名称',key: 'hxpmc'}],
          rightHeader1: [{label: '临界量(吨)',key: 'ljl'},{label: 'β值',key: 'jzxs'}],
          rightsDate:[]
        }
    },
    created() {
        this.getDzOptions();
        this.getGxbmOptions();
        this.getGkfzrOptions();
    },
    methods: {
        getDzOptions(){
           previewDataInterface('e7b2c31f5a7147c08629c5409dd7fdf4').then(res => {
              this.dzOptions = res.data
           })
        },
        getGxbmOptions(){
            previewDataInterface('772d2cbcadd24df79243e3d92ef5f690').then(res => {
               this.gxbmOptions = res.data
            })
        },
        getGkfzrOptions(){
            previewDataInterface('8bca424f16d6448ab09e57a028853aa9').then(res => {
               this.gkfzrOptions = res.data
            })
        },

        goBack() {
            // this.$emit('refresh')
            // if (!this.checked.length) return;
            this.visible = false;
            this.$emit("refreshDataList", this.checked);
        },
        init(id, isDetail) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.isDetail = isDetail || false;
            this.$nextTick(() => {
                this.$refs['elForm'].resetFields();
                if (this.dataForm.id) {
                request({
                    // url: '/api/System/ZDWXY/' + this.dataForm.id,
                    url: '/api/System/QYSCZDWXY/' + this.dataForm.id,
                    method: 'get'
                }).then(res =>{
                    this.dataForm = res.data;
                    this.dataForm.knsg = this.dataForm.knsg ? this.dataForm.knsg.split(','):[];
                    this.rightsDate = JSON.parse(res.data.wxwz);
                    this.heightTable = (this.rightsDate.length*50+40)+'px'
                })
                }
            })
        },
        // 表单提交
        dataFormSubmit() {
            this.$refs['elForm'].validate((valid) => {
                if (valid) {
                    this.dataForm.knsg = this.dataForm.knsg.join(',');

                    if (!this.dataForm.id) {
                    request({
                        // url: '/api/System/ZDWXY',
                        url: '/api/System/QYSCZDWXY',
                        method: 'post',
                        data: this.dataForm,
                    }).then((res) =>{
                        this.$message({
                        message: res.msg,
                        type: 'success',
                        duration: 1000,
                        onClose: () =>{
                            this.visible = false;
                            this.$emit('refresh', true);
                        }
                        })
                    })
                    } 
                    // else {
                    //   request({
                    //     // url: '/api/System/ZDWXY/' + this.dataForm.id,
                    //     url: '/api/System/QYSCZDWXY/' + this.dataForm.id,
                    //     method: 'PUT',
                    //     data: this.dataForm
                    //   }).then((res) =>{
                    //     this.$message({
                    //       message: res.msg,
                    //       type: 'success',
                    //       duration: 1000,
                    //       onClose: () =>{
                    //         this.visible = false;
                    //         this.$emit('refresh', true);
                    //       }
                    //     })
                    //   })
                    // }
                }
            })
        },

        //---
        choice() {
            this.goodsBoxVisible = true
            this.$nextTick(() => {
            this.$refs.goodsBox.init()
            })
        },
        initList(list) {
            this.rightsDate = [];
            for (let i = 0; i < list.length; i++) {
            const e = list[i];
            let item = {
                "id": e.id,
                "code": i+1,
                "hxpmc": e.hxpmc,
                "clZhi": undefined,
                "ljl": e.ljl,
                "jzxs": e.jzxs,
                "biZhi":undefined
            }
            this.rightsDate.push(item)
            this.heightTable = (list.length*50+40)+'px'
            }
        },

        handch(Id, clZhi, ljl, jzxs) {
            // console.log('id:', Id, '存量:', clZhi, ',临界量:', ljl, 'β值:', jzxs);
            let that = this;
            let bzzh = 0;
            for(let i = 0; i < that.rightsDate.length; i++){
                if(that.rightsDate[i].id == Id){
                    that.rightsDate[i].biZhi = clZhi/ljl;   //比值
                }
            }
            for(let i = 0; i < that.rightsDate.length; i++){
                bzzh+=that.rightsDate[i].biZhi;
            }
            that.dataForm.bzzh = bzzh;   //比值之和
            if(that.dataForm.bzzh > 1){
                that.dataForm.bsjg = '已构成危险品重大危险源';
                that.fjRecord = true;
                that.dataForm.cwsl = undefined;  //厂外暴露人员数量
            }else if(that.dataForm.bzzh <= 1){
                that.fjRecord = false;
                that.dataForm.bsjg = '未构成危险品重大危险源';  
                that.dataForm.cwsl = 0;  //厂外暴露人员数量
                that.dataForm.blxs = 0;   //暴露人员校正系数
                that.dataForm.rz = 0;   //R值
                that.dataForm.wxydj = '05';  //危险源等级
            }
            let num = that.dataForm.cwsl;
            that.handchRS(num);
        },
        handchRS(num){
            // console.log('人数：',num);
            let that = this;
            let r = 0;
            if(num >= 100){
                r = 2.0;
            }else if(num >= 50 && num <= 99){
                r = 1.5;
            }else if(num >= 30 && num <= 49){
                r = 1.2;
            }else if(num >= 1 && num <= 29){
                r = 1.0;
            }else if(num == 0){
                r = 0.5;
            }
            that.dataForm.blxs = r;
            let R = 0;
            let listHe = 0;
            for(let i = 0; i < that.rightsDate.length; i++){
                let z = that.rightsDate[i].jzxs*that.rightsDate[i].clZhi/that.rightsDate[i].ljl;
                // console.log(z);
                listHe = listHe+z;
            }
            R = r * listHe;
            that.dataForm.rz = R;  //R值
            if(R >= 100){
                that.dataForm.wxydj = '01';  //危险源等级
            }else if(R >= 50 && R < 100){
                that.dataForm.wxydj = '02';  //危险源等级
            }else if(R >= 10 && R < 50){
                that.dataForm.wxydj = '03';  //危险源等级
            }else if( R < 10){
                that.dataForm.wxydj = '04';  //危险源等级
            }
        },

        select() {
            if (!this.checked.length) return;
            this.visible = false;
            this.$emit("refreshDataList", this.checked);
        },
    }
};
</script>
<style lang="scss" scoped>
>>> .el-dialog__body {
  height: 70vh;
  padding: 0 0 10px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .JNPF-common-search-box {
    margin-bottom: 0;
    .JNPF-common-search-box-right {
      padding: 10px 10px 0 0;
    }
  }
}
</style>